<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test1">
        <p v-text="msg"></p>
        <p v-upper-text="msg"></p>
        <p v-lower-text="msg"></p>
    </div>


    <div id="test2">
        <p v-upper-text="msg"></p>
        <p v-lower-text="msg"></p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        /* 
        全局自定义指令

        局部自定义指令


        */
       Vue.directive('upper-text',function(el,binding){
           console.log('upper-text',el,binding);
           el.textContent = binding.value.toUpperCase();//全部转换为大写
       })

        new Vue({
            el:'#test1',
            data:{
                msg:' I Want To Chengdu',
            }
        })


        new Vue({
            el:'#test2',
            data:{
                msg:'I THINK YOU LOOK AT A PIG!!!'
            },
            directives:{
                // 局部定义指令要使用directives
                // 定义局部指令
                // 'lower-text':function(el,binding){
                //     el.textContent = binding.value.toLowerCase();
                // }
                'lower-text' (el,binding){
                    el.textContent = binding.value.toLowerCase();
                }
            }
        })
        /* 
        Vue自定义的指令
            v-on  绑定事件
            v-model 实现数据双向绑定
            v-bind 强制绑定实现动态数据
            v-if/v-else 条件判断显示或者隐藏 通过删除元素来实现隐藏和显示
            v-show 条件判断显示或者隐藏 是使用css样式来实现的
            v-for xunhuan
            v-text 更新元素的textContent
            v-html 更新元素的innerHTML 可以解析标签


            ref 用来标识元素使用$refs来设置

        */
    </script>
</body>
</html>